<template>
    <div class="da">
        <div class="zc">注册</div>
    <van-form @submit="onSubmit">
        <van-field

                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field

                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field

                type="repeatPassword"
                name="重复密码"
                label="重复密码"
                placeholder="重复密码"
                :rules="[{ required: true, message: '请再次填写密码' }]"
        />
        <van-field
                v-model="phone"
                type="phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
                v-model="captcha"
                label="短信验证码"
                placeholder="短信验证码"
                :rules="[{ required: true, message: '请输入验证码' }]">

            <template #button>
                <van-button  size="small" type="primary" @click="yzm" >{{btnText}}</van-button>
            </template>
         </van-field>

        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="doSubmit">提交</van-button>
            <van-checkbox v-model="agree" style="padding: 20px 70px;font-size: 15px">同意用户协议</van-checkbox>
        </div>
    </van-form>
    </div>
</template>

<script>
    import axios from 'axios'
    import {Toast,Notify} from 'vant'
    import { zhuce,zhuce2 } from "@/api/zhuce"

    export default {
        name: "zhuce",
        data(){
            return{
                phone:"",
                btnText:"获取验证码",
                username:"",
                password:"",
                repeatPassword:"",
                captcha:""

            };

        },
        methods:{
            yzm(){
                //获取用户输入的手机号
                const phone = this.$data.phone
                //判断用户填写的手机号是否为空
               if(phone == ''){
                   Toast.fail("请填写手机号")
               }
               const  data = {
                   phone:phone,
                   type:"register"
               }
               const requestData = JSON.stringify(data)
                zhuce(requestData).then(res=>{
                    console.log(res)
                    const data = res.data
                    console.log(data)
                    //判断获取验证码功能是否成功
                    const {status,msg} = data
                    if( status == 200 ){

                        const da = data.data
                        this.$data.btnText = da

                    }else{
                        Notify(msg)
                    }

                })
            },
            doSubmit(){
                const username = this.$data.username

                const password = this.$data.password

                const repeatpassword = this.$data.repeatpassword

                const phone = this.$data.phone

                const captcha = this.$data.captcha
                //判断密码是否一致
                if(password != repeatpassword ){
                    Toast.fail("密码两次输入不一致")
                }
                //将数据转换成javascript对象形式
                const data={
                    account:phone,
                    captcha:captcha,
                    nickname:username,
                    password:password
                }
                //将JavaScript对象形式数据转换成JSON格式
                const requestData = JSON.stringify(data)

                zhuce2(requestData).then(res=>{

                    //跳转到登录界面
                   if(res){
                       const data = res.data
                       this.$router.push("/login")
                   }

                })

            }

        },
    }
</script>

<style scoped>
 .da{
     margin-top: 100px;
     padding: 0px 50px;
 }
    .zc{
        font-size: 35px;
       color: #42b983;
        margin-bottom: 20px;
    }
</style>